<template>
	<div>
		<CommonTable
			:columns="columns"
			:data="tableData"
			:loading="loading"
			:page-size="10"
			:total="total"
			@sort-change="handleSortChange"
			@page-change="handlePageChange"
		/>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CommonTable from "@/components/element-plus/PublicTable.vue";

interface TableRow {
	date: string;
	name: string;
	address: string;
}

interface Column {
	prop: string;
	label: string;
	width?: string;
	sortable?: boolean;
	type?: string;
}

const columns = ref<Column[]>([
	{ type: "selection", prop: "selection", width: "55", label: "" },
	{ prop: "date", label: "Date", sortable: true },
	{ prop: "name", label: "Name", sortable: true },
	{ prop: "address", label: "Address" },
]);

const tableData = ref<TableRow[]>([
	{ date: "2021-10-01", name: "Tom", address: "No. 189, Grove St, Los Angeles" },
	{ date: "2021-10-02", name: "Jerry", address: "No. 189, Grove St, Los Angeles" },
	// 更多数据...
]);

const loading = ref(false);
const total = ref(tableData.value.length);

const handleSortChange = (sort: { prop: string; order: string }) => {
	console.log("Sort Change:", sort);
};

const handlePageChange = (page: number) => {
	console.log("Page Change:", page);
};
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
